<template>
  <div class="banner">
    <ul>
      <li
        ref="ul_li"
        v-for="(item, index) in imagePlaces"
        :key="index"
      >
        <img
          :src="imgs(item.image)"
          alt=""
        />
      </li>
      <div
        class="control"
        @click="clickFn"
        @mouseover="stopSwiper"
        @mouseleave="continueSwiper"
      >
        <div
          class="prev"
          @click.stop="prevImage"
        ></div>
        <div
          class="next"
          @click.stop="nextImage"
        ></div>
        <ol>
          <li
            v-for="(pics, index) in imagePlaces"
            :key="index"
            @click.stop="clickDot(index)"
          >
            <div :class="swiperIndex === index ? 'current' : ''"></div>
          </li>
        </ol>
      </div>
    </ul>
  </div>
</template>

<script>
export default {
  props: {
    imagePlaces: {
      type: Array,
      default: () => {}
    }
  },
  computed: {
    imgs: function () {
      return function (img) {
        return img === ''
          ? require('../assets/static.png')
          : `${this.baseURL}/uploads/${img.split(',')[0]}`
      }
    }
  },
  data() {
    return {
      times: null,
      swiperIndex: 0,
      timeLock: 0,
      baseURL: this.baseURL
    }
  },
  watch: {
    imagePlaces: function (val) {
      this.$nextTick(() => {
        // console.log(this.$refs.ul_li);
        this.$refs.ul_li[this.swiperIndex].style.opacity = 1
        this.stopSwiper()
        this.swiper()
      })
    }
  },
  // mounted() {
  //   // console.log(this.$refs.ul_li);
  //   // this.$refs.ul_li[this.swiperIndex].style.opacity = 1;
  //   // this.swiper();
  // },
  methods: {
    clickFn() {
      this.$router.push({
        path: '/bokeriji',
        query: {
          id: this.imagePlaces[this.swiperIndex].id
        }
      })
      this.$emit('getData')
      // this.$router.go(0);
      // location.reload()
      // 第三种方式
      // 新建一个空白页面supplierAllBack.vue，点击确定的时候先跳转到这个空白页，然后再立马跳转回来
    },
    clickDot(e) {
      this.swiperIndex = e
      this.exclusive()
    },
    prevImage() {
      if (this.swiperIndex === 0) {
        this.swiperIndex = this.imagePlaces.length
      }
      this.swiperIndex--
      this.exclusive()
    },
    nextImage() {
      this.swiperIndex++
      if (this.swiperIndex >= this.imagePlaces.length) {
        this.swiperIndex = 0
      }
      this.exclusive()
    },
    stopSwiper() {
      clearInterval(this.times)
    },
    continueSwiper() {
      this.swiper()
    },
    swiper() {
      this.times = setInterval(() => {
        this.swiperIndex++
        if (this.swiperIndex >= this.imagePlaces.length) {
          this.swiperIndex = 0
        }
        this.exclusive()
      }, 2000)
    },
    exclusive() {
      for (let i = 0; i < this.imagePlaces.length; i++) {
        // divs[i].className = "";
        this.$refs.ul_li[i] && (this.$refs.ul_li[i].style.opacity = 0)
      }
      // 使当前ul li 和div显示
      this.$refs.ul_li[this.swiperIndex] &&
        (this.$refs.ul_li[this.swiperIndex].style.opacity = 1)
      // divs[index].className = "current";
    }
  }
}
</script>

<style lang="scss" scoped>
@media only screen and (max-width: 480px) {
  body .banner {
    height: 230px;
  }
  body .banner ul .control ol {
    width: 150px;
    height: 20px;
    li {
      width: 10px;
      height: 10px;
    }
  }
}

.banner {
  width: 100%;
  height: 400px;
  background-color: rgba(62, 62, 62, 0.1);
  border-radius: 5px;
  overflow: hidden;
  margin-bottom: 20px;
  ul {
    width: 100%;
    height: 100%;
    position: relative;
    li {
      width: 100%;
      height: 100%;
      position: absolute;
      left: 0;
      top: 0;
      opacity: 0;
      overflow: hidden;
      transition: all 0.8s;
      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        // z-index: 999;
      }
    }
    .control {
      position: relative;
      width: 100%;
      height: 100%;
      /* padding-top: 50%; */
      font-family: 'futura', arial;
      overflow: hidden;
      .prev,
      .next {
        position: absolute;
        height: 32px;
        line-height: 32px;
        width: 40px;
        top: 50%;
        left: 50px;
        margin-top: -25px;
        cursor: pointer;
        opacity: 0;
        transition: all 150ms;
      }
      .prev {
        background: url(../assets/left.png) no-repeat;
      }
      .next {
        left: auto;
        right: 50px;
        background: url(../assets/right.png) no-repeat;
      }
      ol {
        width: 200px;
        height: 35px;
        position: absolute;
        left: 50%;
        bottom: 5%;
        z-index: 999;
        transform: translateX(-50%);
        // background: chocolate;
        display: flex;
        align-content: center;
        justify-content: space-around;
        li {
          // float: left;
          width: 16px;
          height: 16px;
          opacity: 1;
          background: #ffffff;
          // border: 1px solid rgba(255, 192, 203, 0.5);
          border-radius: 50%;
          position: relative;
          cursor: pointer;
          div {
            width: 100%;
            height: 100%;
            background-color: rgba(89, 230, 243, 0.5);
            border-radius: 50%;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            /* 使盒子消失 */
            display: none;
          }
          .current {
            display: block;
          }
        }
      }
    }
    .control:hover .prev {
      left: 30px;
      opacity: 1;
    }
    .control:hover .next {
      right: 30px;
      opacity: 1;
    }
  }
}
</style>
